<template name="index-card">
    <view class="container">
        <index-title :src="item.icon" :text="item.name" :categoryId="item.id" :params="item.params"></index-title>
        <!--view class="block"></view-->
        <hongren-swiper 
            v-if="type==='swiper'" 
            style="margin-bottom: 35rpx" 
            s_type="swiper2" 
            :s_list="item.product"
        ></hongren-swiper>
        <index-picture 
            v-if="type==='picture'"
            :product="item.product"
        ></index-picture>
        <index-product 
            v-if="type==='i-product'"
            :product="item.product"
        ></index-product>
        <product-scrollbar 
            v-if="type==='s-product'"
            :product="item.product"
        ></product-scrollbar>
    </view>
</template>
<script>
import IndexTitle from "@/components/IndexTitle"
import HongrenSwiper from "@/components/HongrenSwiper"
import IndexPicture from "@/components/IndexPicture"
import IndexProduct from "@/components/IndexProduct"
import ProductScrollbar from "@/components/ProductScrollbar"
export default {
    name: "index-card",
    components: {
        IndexTitle,
        HongrenSwiper,
        IndexPicture,
        IndexProduct,
        ProductScrollbar
    },
    props: {
        type: {
            type: String
        },
        item: {
            type: Object
        }
    },
    data() {
        return {
            
        }
    }
}
</script>
<style lang="scss" scoped>
    .container {
        margin-top: 30rpx;
        margin-bottom: 30rpx;
        .block {
            width: 100%;
            height: 35rpx;
        }
    }
</style>